@use "../variables" as *;

.svc-row {
  width: 100%;
  position: relative;
}

// .svc-row:not(.svc-row--ghost) > .sd-row {
//   min-height: 50px;
// }

.svc-row > .sd-row.sd-page__row {
  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
  &.sd-row--delayed-enter {
    margin-top: 0;
  }
}

.svc-row .sd-row.sd-row--multiple {
  overflow: auto;
  width: calc(100% + 4 * var(--sjs-base-unit, var(--base-unit, 8px)));
  flex-wrap: nowrap;
  margin-top: 0;
  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
  padding-right: calcSize(2);
  padding-bottom: 2px;
  margin-right: calcSize(-2);
  margin-bottom: -2px;
}

.sd-panel .svc-row .sd-row--multiple {
  padding: calcSize(0);
  box-shadow: none;
  border-radius: 0;
  padding: 2px; //need for the https://github.com/surveyjs/survey-creator/issues/3288
  margin: -2px; //need for the https://github.com/surveyjs/survey-creator/issues/3288
  width: 100%;
  & > div {
    padding: 0;
  }
}

.svc-row.svc-row--ghost {
  .svc-question__content {
    padding: 0;
    border: none;
    box-shadow: none;
  }

  .sd-row {
    height: calcSize(4);
  }

  &:last-child .sd-row {
    height: initial;
    margin-top: calcSize(2);
    margin-bottom: calcSize(2);
  }

  & + .svc-row {
    .sd-page__row {
      margin-top: 0;
    }
  }
}

.svc-panel .svc-row.svc-row--ghost.svc-row.svc-row--ghost {
  .sd-row {
    height: initial;
    margin-top: calcSize(2);
    margin-bottom: calcSize(2);
  }
}

.svc-row__drop-indicator {
  position: absolute;
  background: var(--ctr-survey-drop-indicator-color, var(--sjs-primary-background-500, #19b394ff));
  opacity: 0;
  transition: opacity $creator-transition-duration;
}

.svc-row__drop-indicator--top,
.svc-row__drop-indicator--bottom {
  left: 0;
  width: 100%;
  height: 0px;
}

.svc-row__drop-indicator--top {
  top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) - var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / 2)
}

.svc-row__drop-indicator--bottom {
  bottom: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) - var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2)
}

.svc-row--drag-over-top {
  >.svc-row__drop-indicator--top {
    opacity: 1;
    height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
  }
}

.svc-row--drag-over-bottom {
  >.svc-row__drop-indicator--bottom {
    opacity: 1;
    height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
  }
}

.svc-question__content--panel,
.sd-panel__content {
  .svc-row__drop-indicator--top {
    top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2);
  }
}

.svc-question__content--panel,
.sd-panel__content {
  .svc-row--drag-over-top:before {
    top: -4px;

    &:first-child {
    }
  }

  .svc-row--drag-over-bottom:after {
    bottom: -4px;

    &:last-child {
    }
  }
}
.svc-creator--disable-animations {
  .svc-row {
    @include disableLibraryAnimations;
  }
}

.sd-panel .svc-row > .sd-row.sd-row--multiple {
  width: calc(100% + #{$base-unit});
  padding-left: 0;
  margin-left: calcSize(-1);
  & > div {
    box-sizing: border-box;
    --animation-padding-left: #{calcSize(1)};
    padding-left: calcSize(1);
  }
}
$svc-row-fade-in-duration: var(--sjs-svc-row-fade-in-duration, 250ms);
$svc-row-move-in-duration: var(--sjs-svc-row-move-in-duration, 250ms);
$svc-row-fade-in-delay: var(--sjs-svc-row-fade-in-delay, 100ms);
$svc-row-fade-out-duration: var(--sjs-svc-row-fade-out-duration, 250ms);
$svc-row-move-out-duration: var(--sjs-svc-row-move-out-duration, 250ms);
$svc-row-move-out-delay: var(--sjs-svc-row-move-out-delay, 100ms);
$svc-row-fade-in-animation-delay: var(--sjs-svc-row-fade-in-animation-delay, 0s);

.svc-row {
  --sjs-row-fade-in-duration: #{$svc-row-fade-in-duration};
  --sjs-row-move-in-duration: #{$svc-row-move-in-duration};
  --sjs-row-fade-in-delay: #{$svc-row-fade-in-delay};
  --sjs-row-fade-out-duration: #{$svc-row-fade-out-duration};
  --sjs-row-move-out-duration: #{$svc-row-move-out-duration};
  --sjs-row-move-out-delay: #{$svc-row-move-out-delay};
  --sjs-row-fade-in-animation-delay: #{$svc-row-fade-in-animation-delay};
}